<template>
  <!-- 采购订单查询页面 -->

  <div>
    <div class="model-search">
      <el-space wrap size="80">
        <div class="search_time">
          采购日期：
          <div class="search_time_input">
            <el-date-picker v-model="search_cgrq" format="YYYY-MM-DD" type="daterange" unlink-panels range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" :shortcuts="shortcuts">
            </el-date-picker>
          </div>
        </div>

        <div class="search_title">
          供应商:
          <div class="search_content">
            <el-input v-model="search_gys" placeholder="请输入供应商" clearable @clear="load"></el-input>
          </div>
        </div>

        <div class="search_title">
          采购员:
          <div class="search_content">
            <el-input v-model="search_cgy" placeholder="请输入采购员" clearable @clear="load">
              <template #append>
                <el-button icon="el-icon-search" @click="load">搜索</el-button>
              </template>
            </el-input>
          </div>
        </div>

      </el-space>
    </div>
    <!-- 表格 -->
    <div>
      <el-table :data="tableData" :locale="locale" empty-text="暂无数据" border stripe class="model-tables">
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column type="index" label="ID" sortable> </el-table-column>
        <el-table-column prop="cgzz" label="采购组织" sortable> </el-table-column>
        <el-table-column prop="cgddh" label="采购订单号" sortable> </el-table-column>
        <el-table-column prop="gys" label="供应商" sortable> </el-table-column>
        <el-table-column prop="cgy" label="采购员" sortable> </el-table-column>
        <el-table-column prop="wlbm" label="物料编码" sortable> </el-table-column>
        <el-table-column prop="name" label="名称" sortable></el-table-column>
        <el-table-column prop="ggxh" label="规格型号" sortable></el-table-column>
        <el-table-column prop="cgrq" label="采购日期" sortable></el-table-column>
        <el-table-column prop="ddshrq" label="订单审核日期" sortable></el-table-column>
      </el-table>
    </div>

    <!-- 分页 -->
    <el-pagination class="model-pages" @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pageNum" :page-sizes="[10, 20, 50, 100,200,500,1000,2000,5000]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total">
    </el-pagination>
  </div>
</template>

<script>
import request from "../utils/request.js"; // axios请求工具类
import zhCn from "element-plus/lib/locale/lang/zh-cn";
export default {
  setup() {
    return {
      locale: zhCn,
    };
  },
  data() {
    return {
      search_gys: "", // 搜索供应商
      search_cgy: "", // 搜索采购员
      search_cgrq: "", // 采购日期
      // search_ddshrq: "2021-12-18", // 订单审核日期
      pageNum: 1, // 当前页码
      pageSize: 10, //每页多少条
      total: 0, //总条数
      tableData: [], // 表格对象
      shortcuts: [
        {
          text: "最近一周",
          value: () => {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
            return [start, end];
          },
        },
        {
          text: "最近一个月",
          value: () => {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
            return [start, end];
          },
        },
        {
          text: "最近三个月",
          value: () => {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
            return [start, end];
          },
        },
        {
          text: "最近六个月",
          value: () => {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 180);
            return [start, end];
          },
        },
        {
          text: "最近一年",
          value: () => {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 360);
            return [start, end];
          },
        },
      ],
    };
  },
  created() {
    // console.log("页面初始化完成！");
    this.load();
  },
  activated() {
    // 实时更新表格数据
    // console.log("加载数据！");
    this.load();
  },
  methods: {
    //时间格式化函数，此处仅针对yyyy-MM-dd hh:mm:ss 的格式进行格式化
    dateFormat(time) {
      var date = new Date(time);
      var year = date.getFullYear();
      /* 在日期格式中，月份是从0开始的，因此要加0
       * 使用三元表达式在小于10的前面加0，以达到格式统一  如 09:11:05
       * */
      var month =
        date.getMonth() + 1 < 10
          ? "0" + (date.getMonth() + 1)
          : date.getMonth() + 1;
      var day = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
      // var hours =
      //   date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
      // var minutes =
      //   date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
      // var seconds =
      //   date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
      // 拼接
      return year + "-" + month + "-" + day;
    },
    // 加载数据 moment(date).format("YYYY-MM-DD")
    load() {
      const loading = this.$loading({
        lock: true,
        text: "正在加载数据",
        spinner: "el-icon-loading",
        background: "rgba(255,255,255,0.8)",
      });
      this.tableData = [];
      var cgrq_start = this.dateFormat(this.search_cgrq[0]);
      var cgrq_end = this.dateFormat(this.search_cgrq[1]);
      if (cgrq_start == "NaN-NaN-NaN") {
        cgrq_start = "2021-12-16";
      }
      if (cgrq_end == "NaN-NaN-NaN") {
        cgrq_end = "2021-12-18";
      }
      console.log(cgrq_start + "---" + cgrq_end);
      request
        .get("/api/purchase/pagePurchase", {
          params: {
            pageNum: this.pageNum,
            pageSize: this.pageSize,
            gys: this.search_gys,
            cgy: this.search_cgy,
            cgrq_start: cgrq_start,
            cgrq_end: cgrq_end,
          },
        })
        .then((res) => {
          this.tableData = res.data.records;
          this.total = res.data.total;
          this.pageSize = res.data.size;
          this.pageNum = res.data.current;
        });
      loading.close();
    },

    //每页最多显示条数10   20   30   50
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.pageSize = val;
      this.load();
    },
    //翻页
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.pageNum = val;
      this.load();
    },
  },
};
</script>
<style scoped>
/* 表格 */
.model-table {
  width: 100%;
  padding: 10px;
}

/* 功能区域按钮 */
.model-opt-btn {
  margin: 5px 0;
}

/* 搜索区域 */
.model-search {
  margin: 10px 10px 10px 10px;
  /* padding: 10px 10px 10px 10px; */
  /* display: inline-flex; */
  width: 100%;
}

/* 搜索按钮 */
.model-search-btn {
  margin-left: 5px;
}

/* 分页 */
.model-pages {
  margin: 10px 0;
}
</style>